<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="会员奖励详情"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 商家信息卡片 -->
      <view class="merchant-card">
        <view class="merchant-info">
          <view class="info-row">
            <text class="merchant-name">{{ merchantInfo.merchantName }}</text>
          </view>

          <view class="info-row">
            <text class="label">订单编号：</text>
            <text class="value">{{ merchantInfo.orderNumber }}</text>
          </view>

          <view class="info-row">
            <text class="label">订单金额：</text>
            <text class="value amount">¥ {{ merchantInfo.amount }}</text>
          </view>

          <view class="info-row">
            <text class="label">积分：</text>
            <text class="value">{{ merchantInfo.points }}</text>
          </view>
        </view>
      </view>

      <!-- 累计收入抵用券 -->
      <view class="coupon-section">
        <view class="section-header" @click="toggleDetail">
          <text class="section-title"
            >累计收入抵用券：<text class="highlight">{{
              totalCoupon
            }}</text></text
          >
          <view class="expand-btn">
            <text class="expand-text">明细展开</text>
            <uni-icons
              :type="isExpanded ? 'top' : 'bottom'"
              size="16"
              color="#ff9500"
            ></uni-icons>
          </view>
        </view>

        <!-- 明细列表 -->
        <view v-if="isExpanded" class="detail-list">
          <view
            v-for="(item, index) in couponDetails"
            :key="index"
            class="detail-item"
          >
            <text class="detail-date">{{ item.date }}</text>
            <text class="detail-amount">{{ item.amount }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

// 商家信息
const merchantInfo = ref({
  merchantName: "比那多鲜果红五月店",
  orderNumber: "197799945438482847B",
  amount: "88.6",
  points: "17.72",
});

// 是否展开明细
const isExpanded = ref(false);

// 抵用券明细
const couponDetails = ref([{ date: "2025-10-15", amount: "0.0532" }]);

// 计算累计收入抵用券
const totalCoupon = computed(() => {
  const total = couponDetails.value.reduce(
    (sum, item) => sum + parseFloat(item.amount),
    0
  );
  return total.toFixed(4);
});

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 切换明细展开/收起
const toggleDetail = () => {
  isExpanded.value = !isExpanded.value;
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 16rpx;
  padding-top: 20rpx;
}

// 商家信息卡片
.merchant-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.merchant-info {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-row {
  display: flex;
  align-items: flex-start;

  .merchant-name {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
  }

  .label {
    font-size: 28rpx;
    color: #666;
    flex-shrink: 0;
  }

  .value {
    font-size: 28rpx;
    color: #333;
    word-break: break-all;

    &.amount {
      font-weight: 600;
    }
  }
}

// 累计收入抵用券
.coupon-section {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  cursor: pointer;

  &:active {
    background-color: #f9f9f9;
  }
}

.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;

  .highlight {
    color: #ff9500;
    font-weight: 600;
  }
}

.expand-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.expand-text {
  font-size: 24rpx;
  color: #ff9500;
}

// 明细列表
.detail-list {
  border-top: 1rpx solid #f5f5f5;
  padding: 0 32rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.detail-date {
  font-size: 28rpx;
  color: #333;
}

.detail-amount {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
</style>
